<template>
  <div class="container">
    <header>头</header>
    <main>
      <van-empty description="购物车" v-if="cartList.length == 0" />
      <div class="cart-list" v-else>
        <van-swipe-cell  v-for="item in cartList">
          <van-row>
            <van-col span="2">
                <van-checkbox style="margin-top: 40px;margin-left: 12px" v-model="item.flag"></van-checkbox>
            </van-col>
            <van-col span="22">
              <van-card :price="item.originprice" :title="item.proname" class="goods-card"
            :thumb="item.img1">
            <template #num>
              <van-stepper v-model="item.num" theme="round" button-size="22" disable-input />
            </template>
          </van-card>
            </van-col>
          </van-row>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
        <van-submit-bar :price="3050" button-text="提交订单">
          <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </main>
  </div>
</template>

<script>
import { getCartList } from '@/apis/cart/index'
export default {
  data() {
    return {
      value: 1,
      cartList: []
    }
  },
  created() {
    getCartList({ userid: localStorage.getItem("userid") }).then(res => {
      console.log(res);
      this.cartList = res.data.data||[];


    })
  }
}
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
</style>